<ion-view hide-nav-bar="true" style="background-color: #F1F1F1;" hide-back-button="true" ng-controller="courseCtrl" ng-cloak>
  <ion-header-bar align-title="center" class="bar-default" style="background-color: #F8F8F8;">
    <h1 class="title">约课</h1>
  </ion-header-bar>

  <ion-content>
    <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>
    <ion-list>
      <ion-item class="clearfix" style="border-bottom: none;" ng-click="allOrders()">
        <span class="fl black">我的订单</span>
        <span class="fr ion-chevron-right grey"></span>
        <span class="fr mR10 lightGray">全部订单</span>
      </ion-item>
      <ion-item style="border-top: none;">
        <ul class="courseTabs">
          <li class="courseTabList" ng-click="unused()">
            <!--<span class="ion-ios-folder-outline fs50" style="color: #FF9900;"></span>-->
            <div><img src="img/unUsed.png" alt="待使用" style="width: 70%;margin-top: 4px;"></div>
            <span style="margin-top: 6px;">待使用</span>
          </li>
          <li class="courseTabList" ng-click="futureEvaluate()">
            <!--<div><img src="img/futerE.png" alt="待使用" style="width: 70%;margin-top: 4px;"></div>-->
            <!--<span style="margin-top: 6px;">待评价</span>-->
          </li>
          <li class="courseTabList" ng-click="cancelCourse()">
            <span class="ion-ios-close-outline fs50 " style="color: dodgerblue;"></span>
            <span>取消的</span>
          </li>
        </ul>
      </ion-item>
      <ion-item class="clearfix courseMember">
        <span class="fl black">最近课程</span>
      </ion-item>
    </ion-list>
    <ion-list>
      <ion-item class="clearfix  f12" style="border-left: none;border-right: none;position: relative" ng-repeat="item in recentCourse"
        ng-click="onlClick1(item.id,item.aboutId,'{{item.type}}',item,item.classStatus)">
        <div class="fl clearfix courseMemberMes">
          <div></div>
          <!--<div ng-hide="item.courseFlag" class="courseMemberImg fl" style="background-image:url('{{item.pic}}');background-size: 100% 100%;"></div>-->
          <div class="courseMemberImg fl" style="background-image:url({{item.pic}});background-size: 100% 100%;"></div>
          <ul class="fl " style="color: #999999;margin-left: 6px;">
            <li class="clearfix ">
              <h4 class="fl" ng-if="item.classType == 'group'">{{item.name}}</h4>
              <h4 class="fl" ng-if="item.classType == 'charge'">{{item.product_name}}</h4>
              <div class="courseMark fl"><span>{{item.classType == 'group' ? '团' : '私'}}</span></div>
            </li>
            <li ng-show="item.courseFlag">
              <div><span>第{{item.chargeNum}}节</span>&emsp;<span>{{item.chargeName}}</span> </div>
            </li>
            <li>
              教练：<span>{{item.coachName}}</span>
            </li>
            <li>
              <div>开课时间: <span class="courseDate">{{item.class_date}}</span><span class="courseTime">{{item.start}}</span></div>
            </li>
          </ul>
        </div>
        <!--待使用显示的样式-->
        <div class="fr courseState" ng-if="item.unusedFlag == true">
          <div class="lightGreen"><span>待使用</span></div>
          <div class="courseStateBotton"><span>已预约</span></div>
        </div>
        <!--待评价显示的样式-->
        <!--<div class="fr courseState" ng-if="item.futureEvaluateFlag">
          <div class="lightGreen"><span>待评价</span></div>
          <!--<div class="courseStateBotton" ><button class="button button-small courseReview" >评价</button></div>-->
        <!--</div>-->
        <!--已完成显示的样式-->
        <div class="fr courseState" ng-if="item.classStatus == true">
          <div class="lightGreen"><span>上课中</span></div>
        </div>
        <div class="fr courseState" ng-if="item.classStatus == false">
          <div class="lightGreen"><span>课程结束</span></div>
        </div>
        <!--已取消显示的样式-->
        <div class="fr courseState" ng-if="item.cancelFlag == true">
          <div class="lightGreen"><span>已取消</span></div>
        </div>
      </ion-item>
      <ion-item ng-if="recentCourse == ''" style="text-align: center">
        您还没有课程
      </ion-item>
    </ion-list>
  </ion-content>
</ion-view>